<template>
  <transition name="slide-fade">
    <div v-if="showNav" class="side-navigation-bar absolute top-[151px] right-[19px]">
      <div class="side-container w-full h-full flex flex-col justify-around items-center">
        <div v-for="item in navData" :key="item.id"
          class="nav-item w-full h-full flex justify-center items-center flex-auto">
          <div class="item-content" @click="nodeClick(item)">
            <div class="nav-icon"
              :style="{ '--nav-icon': `url(${item.icon})`, '--nav-touch-icon': `url(${item.touch_icon || item.icon})` }">
            </div>
            <span class="nav-title truncate inline-block w-[34px]">
              {{ item.name }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script lang="ts" name="SideNavigationBar" setup>
import { useSub, useForm, useShare } from '@/utils/comps';
import { useConfigStore } from '@/store/config';
import { useTtsaStore } from '@/store/ttsa';
import { useAppRouter } from '@/hooks';
import { useTrack } from '@/hooks';

const ttsaStore = useTtsaStore();
const configStore = useConfigStore();
const { setTrack } = useTrack();

const navData = computed(() => configStore.navs);
const showNav = computed(() => navData?.value?.length > 0);

const funMap = {
  '0': (link) => {
    const [content_id, node_id] = link.split('_')
    ttsaStore.next({ content_id, node_id, jump_type: 'peek' })
  }, // 内容
  '1': useAppRouter, // 外链
  '3': useSub, // 订阅
  '2': useShare, // 分享
  '4': (id) => useForm(id, true), // 表单
}

const nodeClick = useDebounceFn((node) => {
  console.log(node, 'node')
  const { link_type, link, interrupt_digital } = node
  if (interrupt_digital && !ttsaStore.paused) ttsaStore.pause()
  if (Number(link_type) === 2) {
    // 统计分享点击
    setTrack({
      name: 'interactive',
      type: 'share',
    })
  }
  funMap[link_type](link)
}, 200)

onBeforeMount(() => {
  if (configStore.nav_is_show) {
    configStore.getNavConfig()
  }
})
</script>
<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all 0.6s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.6s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}

.side-navigation-bar {
  width: 70px;
  height: 415px;
  z-index: 200;
  background: linear-gradient(135deg, rgba(215, 228, 255, 0.49) 0%, rgba(215, 228, 255, 0.11) 100%);
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  box-sizing: border-box;
  transition: all 0.15s ease-out;


  .side-container {
    .nav-item {
      position: relative;

      &:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: 53px;
        height: 1px;
        margin-right: 8px;
        margin-left: 9px;
        box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.05);
        opacity: 0.52;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
      }

      .item-content {
        text-align: center;
        cursor: pointer;

        .nav-icon {
          height: 35px;
          background-position: top center;
          background-repeat: no-repeat;
          background-size: cover;
          background-image: var(--nav-icon);
        }

        &:active {
          .nav-icon {
            background-image: var(--nav-touch-icon);
          }
        }

        .nav-title {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #3B5379;
          line-height: 22px;
          letter-spacing: 1px;
          text-shadow: 0px 2px 15px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.21);
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
